<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3841094" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">地下水</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">深部位移</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b6;</span>
                <div class="name">四色图</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec81;</span>
                <div class="name">坡度坡向分析</div>
                <div class="code-name">&amp;#xec81;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">Icon_角度测量</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">坡度分析</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">底层提取</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeadd;</span>
                <div class="name">两两对比</div>
                <div class="code-name">&amp;#xeadd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">智慧生活--库存数据维护</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">5摄像头</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ce;</span>
                <div class="name">风险提示</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a8;</span>
                <div class="name">驾照,驾驶证,行驶证</div>
                <div class="code-name">&amp;#xe8a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">7D四分屏</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">8B十六分屏</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">7F六分屏</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">7H十二分屏</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">7G九分屏</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">节约煤</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70a;</span>
                <div class="name">边坡监测</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec0d;</span>
                <div class="name">图表-copy</div>
                <div class="code-name">&amp;#xec0d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">图表1_fill</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">图表1</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">隐患点</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">隐患排查治理</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c9;</span>
                <div class="name">风险管理</div>
                <div class="code-name">&amp;#xe9c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">列表</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">降雨量_面</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">GNSS</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">clear</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f4;</span>
                <div class="name">unordered list</div>
                <div class="code-name">&amp;#xe7f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe976;</span>
                <div class="name">功能,汉堡键,横杠</div>
                <div class="code-name">&amp;#xe976;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">详情</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">全屏缩小</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">全屏显示</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">环境资源</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">边坡</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
                <div class="name">粉尘信息</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">非煤矿山</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">三维地图</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">数译_全屏</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec0b;</span>
                <div class="name">向下占行</div>
                <div class="code-name">&amp;#xec0b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec0c;</span>
                <div class="name">向上占行</div>
                <div class="code-name">&amp;#xec0c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">面积</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72e;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f9;</span>
                <div class="name">326数值下降</div>
                <div class="code-name">&amp;#xe8f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8fa;</span>
                <div class="name">325数值上升</div>
                <div class="code-name">&amp;#xe8fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">车辆-01</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">人员</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9f7;</span>
                <div class="name">围栏,电子围栏,村庄</div>
                <div class="code-name">&amp;#xe9f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86f;</span>
                <div class="name">预警</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">比例</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">处置</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb22;</span>
                <div class="name">噪音</div>
                <div class="code-name">&amp;#xeb22;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d7;</span>
                <div class="name">温度</div>
                <div class="code-name">&amp;#xe7d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea32;</span>
                <div class="name">PM2.5</div>
                <div class="code-name">&amp;#xea32;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe834;</span>
                <div class="name">PM10-线</div>
                <div class="code-name">&amp;#xe834;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">人员1</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">人员4</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">人员 (2)</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">人员</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">人员</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">查看</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ac;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe8ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">参数</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">皮卡</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">组织人员</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">矿山</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">视频监控</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">IOT物联2</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe867;</span>
                <div class="name">home-fill</div>
                <div class="code-name">&amp;#xe867;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">会员方案 </div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">飞行漫游</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">040-挖矿监控</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">等高线</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">图层</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">分析</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">任意剖切</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">卷帘</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea45;</span>
                <div class="name">评分模型管理</div>
                <div class="code-name">&amp;#xea45;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">预约测量</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">messages</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1705376029078') format('woff2'),
       url('iconfont.woff?t=1705376029078') format('woff'),
       url('iconfont.ttf?t=1705376029078') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-dixiashui"></span>
            <div class="name">
              地下水
            </div>
            <div class="code-name">.icon-dixiashui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenbuweiyi"></span>
            <div class="name">
              深部位移
            </div>
            <div class="code-name">.icon-shenbuweiyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sisetu"></span>
            <div class="name">
              四色图
            </div>
            <div class="code-name">.icon-sisetu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-podupoxiangfenxi"></span>
            <div class="name">
              坡度坡向分析
            </div>
            <div class="code-name">.icon-podupoxiangfenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Icon_jiaoduceliang"></span>
            <div class="name">
              Icon_角度测量
            </div>
            <div class="code-name">.icon-Icon_jiaoduceliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-podufenxi"></span>
            <div class="name">
              坡度分析
            </div>
            <div class="code-name">.icon-podufenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plus"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.icon-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dicengtiqu"></span>
            <div class="name">
              底层提取
            </div>
            <div class="code-name">.icon-dicengtiqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liangliangduibi"></span>
            <div class="name">
              两两对比
            </div>
            <div class="code-name">.icon-liangliangduibi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhihuishenghuo--kucunweihu"></span>
            <div class="name">
              智慧生活--库存数据维护
            </div>
            <div class="code-name">.icon-zhihuishenghuo--kucunweihu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shexiangtou"></span>
            <div class="name">
              5摄像头
            </div>
            <div class="code-name">.icon-shexiangtou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fengxiantishi"></span>
            <div class="name">
              风险提示
            </div>
            <div class="code-name">.icon-fengxiantishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-credentials"></span>
            <div class="name">
              驾照,驾驶证,行驶证
            </div>
            <div class="code-name">.icon-credentials
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-7Dsifenping"></span>
            <div class="name">
              7D四分屏
            </div>
            <div class="code-name">.icon-a-7Dsifenping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-8Bshiliufenping"></span>
            <div class="name">
              8B十六分屏
            </div>
            <div class="code-name">.icon-a-8Bshiliufenping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-7Fliufenping"></span>
            <div class="name">
              7F六分屏
            </div>
            <div class="code-name">.icon-a-7Fliufenping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-7Hshierfenping"></span>
            <div class="name">
              7H十二分屏
            </div>
            <div class="code-name">.icon-a-7Hshierfenping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-7Gjiufenping"></span>
            <div class="name">
              7G九分屏
            </div>
            <div class="code-name">.icon-a-7Gjiufenping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lvse_jieyuemei"></span>
            <div class="name">
              节约煤
            </div>
            <div class="code-name">.icon-lvse_jieyuemei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianpojiance"></span>
            <div class="name">
              边坡监测
            </div>
            <div class="code-name">.icon-bianpojiance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao"></span>
            <div class="name">
              图表-copy
            </div>
            <div class="code-name">.icon-tubiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chart_fill"></span>
            <div class="name">
              图表1_fill
            </div>
            <div class="code-name">.icon-chart_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao-copy"></span>
            <div class="name">
              图表1
            </div>
            <div class="code-name">.icon-tubiao-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinhuandian"></span>
            <div class="name">
              隐患点
            </div>
            <div class="code-name">.icon-yinhuandian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinhuanpaichazhili"></span>
            <div class="name">
              隐患排查治理
            </div>
            <div class="code-name">.icon-yinhuanpaichazhili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fengxianguanli"></span>
            <div class="name">
              风险管理
            </div>
            <div class="code-name">.icon-fengxianguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liebiao"></span>
            <div class="name">
              列表
            </div>
            <div class="code-name">.icon-liebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiangyuliang_mian"></span>
            <div class="name">
              降雨量_面
            </div>
            <div class="code-name">.icon-jiangyuliang_mian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-GNSS"></span>
            <div class="name">
              GNSS
            </div>
            <div class="code-name">.icon-GNSS
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clear"></span>
            <div class="name">
              clear
            </div>
            <div class="code-name">.icon-clear
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unorderedlist"></span>
            <div class="name">
              unordered list
            </div>
            <div class="code-name">.icon-unorderedlist
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-row-full"></span>
            <div class="name">
              功能,汉堡键,横杠
            </div>
            <div class="code-name">.icon-row-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangqing"></span>
            <div class="name">
              详情
            </div>
            <div class="code-name">.icon-xiangqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanpingsuoxiao"></span>
            <div class="name">
              全屏缩小
            </div>
            <div class="code-name">.icon-quanpingsuoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanpingxianshi"></span>
            <div class="name">
              全屏显示
            </div>
            <div class="code-name">.icon-quanpingxianshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huanjingziyuan"></span>
            <div class="name">
              环境资源
            </div>
            <div class="code-name">.icon-huanjingziyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianpo"></span>
            <div class="name">
              边坡
            </div>
            <div class="code-name">.icon-bianpo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenchenxinxi"></span>
            <div class="name">
              粉尘信息
            </div>
            <div class="code-name">.icon-fenchenxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipin1"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.icon-shipin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feimeikuangshan2"></span>
            <div class="name">
              非煤矿山
            </div>
            <div class="code-name">.icon-feimeikuangshan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sanweiditu"></span>
            <div class="name">
              三维地图
            </div>
            <div class="code-name">.icon-sanweiditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuyi_quanping"></span>
            <div class="name">
              数译_全屏
            </div>
            <div class="code-name">.icon-shuyi_quanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangxiazhanhang"></span>
            <div class="name">
              向下占行
            </div>
            <div class="code-name">.icon-xiangxiazhanhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangshangzhanhang"></span>
            <div class="name">
              向上占行
            </div>
            <div class="code-name">.icon-xiangshangzhanhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianji"></span>
            <div class="name">
              面积
            </div>
            <div class="code-name">.icon-mianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuzhixiajiang"></span>
            <div class="name">
              326数值下降
            </div>
            <div class="code-name">.icon-shuzhixiajiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuzhishangsheng"></span>
            <div class="name">
              325数值上升
            </div>
            <div class="code-name">.icon-shuzhishangsheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cheliang-"></span>
            <div class="name">
              车辆-01
            </div>
            <div class="code-name">.icon-cheliang-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fl-renyuan"></span>
            <div class="name">
              人员
            </div>
            <div class="code-name">.icon-fl-renyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fence-full"></span>
            <div class="name">
              围栏,电子围栏,村庄
            </div>
            <div class="code-name">.icon-fence-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yujing"></span>
            <div class="name">
              预警
            </div>
            <div class="code-name">.icon-yujing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bili"></span>
            <div class="name">
              比例
            </div>
            <div class="code-name">.icon-bili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuzhi"></span>
            <div class="name">
              处置
            </div>
            <div class="code-name">.icon-chuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaoyin"></span>
            <div class="name">
              噪音
            </div>
            <div class="code-name">.icon-zaoyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wendu"></span>
            <div class="name">
              温度
            </div>
            <div class="code-name">.icon-wendu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-PM25"></span>
            <div class="name">
              PM2.5
            </div>
            <div class="code-name">.icon-a-PM25
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-PM10-xian"></span>
            <div class="name">
              PM10-线
            </div>
            <div class="code-name">.icon-PM10-xian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renyuan1"></span>
            <div class="name">
              人员1
            </div>
            <div class="code-name">.icon-renyuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renyuan2"></span>
            <div class="name">
              人员4
            </div>
            <div class="code-name">.icon-renyuan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renyuan4"></span>
            <div class="name">
              人员 (2)
            </div>
            <div class="code-name">.icon-renyuan4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ic_person_card24px"></span>
            <div class="name">
              人员
            </div>
            <div class="code-name">.icon-ic_person_card24px
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renyuan5"></span>
            <div class="name">
              人员
            </div>
            <div class="code-name">.icon-renyuan5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chakan"></span>
            <div class="name">
              查看
            </div>
            <div class="code-name">.icon-chakan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-canshu"></span>
            <div class="name">
              参数
            </div>
            <div class="code-name">.icon-canshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test"></span>
            <div class="name">
              皮卡
            </div>
            <div class="code-name">.icon-icon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuzhirenyuan"></span>
            <div class="name">
              组织人员
            </div>
            <div class="code-name">.icon-zuzhirenyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuangshan"></span>
            <div class="name">
              矿山
            </div>
            <div class="code-name">.icon-kuangshan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipinjiankong"></span>
            <div class="name">
              视频监控
            </div>
            <div class="code-name">.icon-shipinjiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-IOTwulian2"></span>
            <div class="name">
              IOT物联2
            </div>
            <div class="code-name">.icon-IOTwulian2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home-fill"></span>
            <div class="name">
              home-fill
            </div>
            <div class="code-name">.icon-home-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huiyuanfangan"></span>
            <div class="name">
              会员方案 
            </div>
            <div class="code-name">.icon-huiyuanfangan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-feixingmanyou"></span>
            <div class="name">
              飞行漫游
            </div>
            <div class="code-name">.icon-icon-feixingmanyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--wakuangjiankong"></span>
            <div class="name">
              040-挖矿监控
            </div>
            <div class="code-name">.icon--wakuangjiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-denggaoxian"></span>
            <div class="name">
              等高线
            </div>
            <div class="code-name">.icon-denggaoxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layer"></span>
            <div class="name">
              图层
            </div>
            <div class="code-name">.icon-layer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxi"></span>
            <div class="name">
              分析
            </div>
            <div class="code-name">.icon-fenxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renyipouqie"></span>
            <div class="name">
              任意剖切
            </div>
            <div class="code-name">.icon-renyipouqie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-juanlian"></span>
            <div class="name">
              卷帘
            </div>
            <div class="code-name">.icon-juanlian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pingfenmoxingguanli"></span>
            <div class="name">
              评分模型管理
            </div>
            <div class="code-name">.icon-pingfenmoxingguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyueceliang"></span>
            <div class="name">
              预约测量
            </div>
            <div class="code-name">.icon-yuyueceliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-messages"></span>
            <div class="name">
              messages
            </div>
            <div class="code-name">.icon-messages
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dixiashui"></use>
                </svg>
                <div class="name">地下水</div>
                <div class="code-name">#icon-dixiashui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenbuweiyi"></use>
                </svg>
                <div class="name">深部位移</div>
                <div class="code-name">#icon-shenbuweiyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sisetu"></use>
                </svg>
                <div class="name">四色图</div>
                <div class="code-name">#icon-sisetu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-podupoxiangfenxi"></use>
                </svg>
                <div class="name">坡度坡向分析</div>
                <div class="code-name">#icon-podupoxiangfenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Icon_jiaoduceliang"></use>
                </svg>
                <div class="name">Icon_角度测量</div>
                <div class="code-name">#icon-Icon_jiaoduceliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-podufenxi"></use>
                </svg>
                <div class="name">坡度分析</div>
                <div class="code-name">#icon-podufenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#icon-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dicengtiqu"></use>
                </svg>
                <div class="name">底层提取</div>
                <div class="code-name">#icon-dicengtiqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liangliangduibi"></use>
                </svg>
                <div class="name">两两对比</div>
                <div class="code-name">#icon-liangliangduibi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhihuishenghuo--kucunweihu"></use>
                </svg>
                <div class="name">智慧生活--库存数据维护</div>
                <div class="code-name">#icon-zhihuishenghuo--kucunweihu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shexiangtou"></use>
                </svg>
                <div class="name">5摄像头</div>
                <div class="code-name">#icon-shexiangtou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengxiantishi"></use>
                </svg>
                <div class="name">风险提示</div>
                <div class="code-name">#icon-fengxiantishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-credentials"></use>
                </svg>
                <div class="name">驾照,驾驶证,行驶证</div>
                <div class="code-name">#icon-credentials</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-7Dsifenping"></use>
                </svg>
                <div class="name">7D四分屏</div>
                <div class="code-name">#icon-a-7Dsifenping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-8Bshiliufenping"></use>
                </svg>
                <div class="name">8B十六分屏</div>
                <div class="code-name">#icon-a-8Bshiliufenping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-7Fliufenping"></use>
                </svg>
                <div class="name">7F六分屏</div>
                <div class="code-name">#icon-a-7Fliufenping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-7Hshierfenping"></use>
                </svg>
                <div class="name">7H十二分屏</div>
                <div class="code-name">#icon-a-7Hshierfenping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-7Gjiufenping"></use>
                </svg>
                <div class="name">7G九分屏</div>
                <div class="code-name">#icon-a-7Gjiufenping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lvse_jieyuemei"></use>
                </svg>
                <div class="name">节约煤</div>
                <div class="code-name">#icon-lvse_jieyuemei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianpojiance"></use>
                </svg>
                <div class="name">边坡监测</div>
                <div class="code-name">#icon-bianpojiance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiao"></use>
                </svg>
                <div class="name">图表-copy</div>
                <div class="code-name">#icon-tubiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chart_fill"></use>
                </svg>
                <div class="name">图表1_fill</div>
                <div class="code-name">#icon-chart_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiao-copy"></use>
                </svg>
                <div class="name">图表1</div>
                <div class="code-name">#icon-tubiao-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinhuandian"></use>
                </svg>
                <div class="name">隐患点</div>
                <div class="code-name">#icon-yinhuandian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinhuanpaichazhili"></use>
                </svg>
                <div class="name">隐患排查治理</div>
                <div class="code-name">#icon-yinhuanpaichazhili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengxianguanli"></use>
                </svg>
                <div class="name">风险管理</div>
                <div class="code-name">#icon-fengxianguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liebiao"></use>
                </svg>
                <div class="name">列表</div>
                <div class="code-name">#icon-liebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiangyuliang_mian"></use>
                </svg>
                <div class="name">降雨量_面</div>
                <div class="code-name">#icon-jiangyuliang_mian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-GNSS"></use>
                </svg>
                <div class="name">GNSS</div>
                <div class="code-name">#icon-GNSS</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clear"></use>
                </svg>
                <div class="name">clear</div>
                <div class="code-name">#icon-clear</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unorderedlist"></use>
                </svg>
                <div class="name">unordered list</div>
                <div class="code-name">#icon-unorderedlist</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-row-full"></use>
                </svg>
                <div class="name">功能,汉堡键,横杠</div>
                <div class="code-name">#icon-row-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangqing"></use>
                </svg>
                <div class="name">详情</div>
                <div class="code-name">#icon-xiangqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanpingsuoxiao"></use>
                </svg>
                <div class="name">全屏缩小</div>
                <div class="code-name">#icon-quanpingsuoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanpingxianshi"></use>
                </svg>
                <div class="name">全屏显示</div>
                <div class="code-name">#icon-quanpingxianshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huanjingziyuan"></use>
                </svg>
                <div class="name">环境资源</div>
                <div class="code-name">#icon-huanjingziyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianpo"></use>
                </svg>
                <div class="name">边坡</div>
                <div class="code-name">#icon-bianpo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenchenxinxi"></use>
                </svg>
                <div class="name">粉尘信息</div>
                <div class="code-name">#icon-fenchenxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin1"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#icon-shipin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feimeikuangshan2"></use>
                </svg>
                <div class="name">非煤矿山</div>
                <div class="code-name">#icon-feimeikuangshan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sanweiditu"></use>
                </svg>
                <div class="name">三维地图</div>
                <div class="code-name">#icon-sanweiditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuyi_quanping"></use>
                </svg>
                <div class="name">数译_全屏</div>
                <div class="code-name">#icon-shuyi_quanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangxiazhanhang"></use>
                </svg>
                <div class="name">向下占行</div>
                <div class="code-name">#icon-xiangxiazhanhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangshangzhanhang"></use>
                </svg>
                <div class="name">向上占行</div>
                <div class="code-name">#icon-xiangshangzhanhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianji"></use>
                </svg>
                <div class="name">面积</div>
                <div class="code-name">#icon-mianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuzhixiajiang"></use>
                </svg>
                <div class="name">326数值下降</div>
                <div class="code-name">#icon-shuzhixiajiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuzhishangsheng"></use>
                </svg>
                <div class="name">325数值上升</div>
                <div class="code-name">#icon-shuzhishangsheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cheliang-"></use>
                </svg>
                <div class="name">车辆-01</div>
                <div class="code-name">#icon-cheliang-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fl-renyuan"></use>
                </svg>
                <div class="name">人员</div>
                <div class="code-name">#icon-fl-renyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fence-full"></use>
                </svg>
                <div class="name">围栏,电子围栏,村庄</div>
                <div class="code-name">#icon-fence-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yujing"></use>
                </svg>
                <div class="name">预警</div>
                <div class="code-name">#icon-yujing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bili"></use>
                </svg>
                <div class="name">比例</div>
                <div class="code-name">#icon-bili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuzhi"></use>
                </svg>
                <div class="name">处置</div>
                <div class="code-name">#icon-chuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaoyin"></use>
                </svg>
                <div class="name">噪音</div>
                <div class="code-name">#icon-zaoyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wendu"></use>
                </svg>
                <div class="name">温度</div>
                <div class="code-name">#icon-wendu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-PM25"></use>
                </svg>
                <div class="name">PM2.5</div>
                <div class="code-name">#icon-a-PM25</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-PM10-xian"></use>
                </svg>
                <div class="name">PM10-线</div>
                <div class="code-name">#icon-PM10-xian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renyuan1"></use>
                </svg>
                <div class="name">人员1</div>
                <div class="code-name">#icon-renyuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renyuan2"></use>
                </svg>
                <div class="name">人员4</div>
                <div class="code-name">#icon-renyuan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renyuan4"></use>
                </svg>
                <div class="name">人员 (2)</div>
                <div class="code-name">#icon-renyuan4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ic_person_card24px"></use>
                </svg>
                <div class="name">人员</div>
                <div class="code-name">#icon-ic_person_card24px</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renyuan5"></use>
                </svg>
                <div class="name">人员</div>
                <div class="code-name">#icon-renyuan5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chakan"></use>
                </svg>
                <div class="name">查看</div>
                <div class="code-name">#icon-chakan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-canshu"></use>
                </svg>
                <div class="name">参数</div>
                <div class="code-name">#icon-canshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test"></use>
                </svg>
                <div class="name">皮卡</div>
                <div class="code-name">#icon-icon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuzhirenyuan"></use>
                </svg>
                <div class="name">组织人员</div>
                <div class="code-name">#icon-zuzhirenyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuangshan"></use>
                </svg>
                <div class="name">矿山</div>
                <div class="code-name">#icon-kuangshan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipinjiankong"></use>
                </svg>
                <div class="name">视频监控</div>
                <div class="code-name">#icon-shipinjiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-IOTwulian2"></use>
                </svg>
                <div class="name">IOT物联2</div>
                <div class="code-name">#icon-IOTwulian2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home-fill"></use>
                </svg>
                <div class="name">home-fill</div>
                <div class="code-name">#icon-home-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huiyuanfangan"></use>
                </svg>
                <div class="name">会员方案 </div>
                <div class="code-name">#icon-huiyuanfangan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-feixingmanyou"></use>
                </svg>
                <div class="name">飞行漫游</div>
                <div class="code-name">#icon-icon-feixingmanyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--wakuangjiankong"></use>
                </svg>
                <div class="name">040-挖矿监控</div>
                <div class="code-name">#icon--wakuangjiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-denggaoxian"></use>
                </svg>
                <div class="name">等高线</div>
                <div class="code-name">#icon-denggaoxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layer"></use>
                </svg>
                <div class="name">图层</div>
                <div class="code-name">#icon-layer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxi"></use>
                </svg>
                <div class="name">分析</div>
                <div class="code-name">#icon-fenxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renyipouqie"></use>
                </svg>
                <div class="name">任意剖切</div>
                <div class="code-name">#icon-renyipouqie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-juanlian"></use>
                </svg>
                <div class="name">卷帘</div>
                <div class="code-name">#icon-juanlian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pingfenmoxingguanli"></use>
                </svg>
                <div class="name">评分模型管理</div>
                <div class="code-name">#icon-pingfenmoxingguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyueceliang"></use>
                </svg>
                <div class="name">预约测量</div>
                <div class="code-name">#icon-yuyueceliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-messages"></use>
                </svg>
                <div class="name">messages</div>
                <div class="code-name">#icon-messages</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
